<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <script>
    // 需求：输入一些关键字，得到匹配到数据（模拟数据：找到xx条数据）
    // 优化：为了大家好！
    // 防抖：
    //     1、触发某个事，不要立马执行，稍微延迟下！
    //     2、在第一次延时等待中，再次触发，应该把第一次延迟打断，开启第二次延迟！
    let ipt = document.querySelector('input')
    let timer
    ipt.addEventListener('input', function () {
      if (timer!=undefined) {
        clearTimeout(timer)
      }
      timer = setTimeout(function (params) {
        console.log(`帮到您查询到关于${ipt.value}的数据：${Math.floor(Math.random() * 1000)}条`);
      }, 500)
    })


  </script>
</body>

</html>